<template>
	<view class="promotion">
		<view class="header">
			<view class='name'>
				<view>当前佣金</view>
				<view class='record' @tap="pageClick('/pages/promotion/withdraw')">提现记录</view>
			</view>
			<view class='num'>{{userInfo.commission}}</view>
			<view class='profit'>
				<view class='item'>
					<view>昨日收益</view>
					<view class='money'>{{userInfo.day_commission}}</view>
				</view>
				<view class='item'>
					<view>累积已提</view>
					<view class='money'>{{userInfo.aggregate_commission}}</view>
				</view>
			</view>
		</view>
		<view class='bnt bg-color' @tap="pageClick('/pages/promotion/applyWithdrawal',true)">立即提现</view>
		<view class="list">
			<view class="item" @tap="pageClick('/pages/promotion/share',true)">
				<view class="icon center">
					<image :src="codeIcon" class="auto-img"></image>
				</view>
				<view class="name-s">推广名片</view>
			</view>
			<view class="item" @tap="pageClick('/pages/promotion/commission',true)">
				<view class="icon center">
					<image :src="moenyIcon" class="auto-img"></image>
				</view>
				<view class="name-s">佣金记录</view>
			</view>
			<view class="item" @tap="pageClick('/pages/rankingList/rankingList',true)">
				<view class="icon center">
					<image :src="rankingList" class="auto-img"></image>
				</view>
				<view class="name-s">推广人数排行</view>
			</view>
			<view class="item" @tap="pageClick('/pages/commission/commission',true)">
				<view class="icon center">
					<image :src="commission" class="auto-img"></image>
				</view>
				<view class="name-s">佣金排行</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{},
				codeIcon: require('@/static/public/code.png'),
				moenyIcon: require('@/static/public/money.png'),
				rankingList: require('@/static/public/rankingList.png'),
				commission: require('@/static/public/commission.png'),
			}
		},
		onShow() {
			this.userInfo=uni.getStorageSync('userInfo') || {}
		},
		methods: {
			pageClick(url, isBoolean = false) {
				if (isBoolean == true) {
					uni.navigateTo({
						url
					})
				} else {
					this.$tools.showMsg('敬请期待！')
				}

			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.header {
		background-image: $promotion;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 375rpx;
	}

	.name {
		font-size: 30rpx;
		color: #fff;
		padding-top: 57rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.record {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
		position: absolute;
		right: 20rpx;
	}

	.profit {
		padding: 0 20rpx;
		margin-top: 35rpx;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.num {
		text-align: center;
		color: #fff;
		margin-top: 28rpx;
		font-size: 90rpx;
		font-family: 'Guildford Pro';
	}

	.item {
		min-width: 200rpx;
		text-align: center;
	}

	.money {
		font-size: 34rpx;
		color: #fff;
		margin-top: 5rpx;
	}

	.bnt {
		font-size: 28rpx;
		color: #fff;
		width: 258rpx;
		height: 68rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 68rpx;
		margin: -32rpx auto 0 auto;
		background-color: #e93323;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;

		.item {
			width: 345rpx;
			height: 190rpx;
			border-radius: 20rpx;
			background-color: #fff;
			margin-top: 20rpx;
			font-size: 30rpx;

			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.icon {
				width: 60rpx;
				height: 60rpx;
			}

			.name-s {
				margin-top: 24rpx;
				color: #666;
			}
		}
	}
</style>
